<template>
	<view class="tabbox tabWrap">
		<view class="tabItem" v-for="(dt,index) in lists" :key="dt.id" :class="{'selected':tabIndex==index}" @click="setTab(index)">
			<view class="txt">{{dt.name}}</view> 
		</view>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed,nextTick} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import {useStore} from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	export default defineComponent({
		components: {
			bodyWrap
		},
		props: {
			lists:Array,
			returnKey:''
		},
		setup(props, context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()

			const state = reactive({
				tabIndex:0
			})
			
			onMounted( async()=>{
				
			})
			
			
			const setTab = (index)=>{
				state.tabIndex = index
				if(props.returnKey){
					context.emit('onclick',props.lists[index][props.returnKey])
				}else{
					context.emit('onclick',index)
				}
			}
			return {
				...toRefs(state),
				setTab
			}
		}
	})
</script>

<style lang="scss" scoped>
	.tabbox {
		display: flex;
		.tabItem {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			white-space:nowrap;
			text-align: center;
			padding: 0;
			position: relative;
			z-index: 10;
			&.selected{
				font-weight: 600;
				font-size: 36rpx;
				&::after{
					content: '';
					display: block;
					position: absolute;
					z-index: 11;
					width: 30rpx;
					height: 8rpx;
					background-color: #fba70e;
					left: 50%;
					bottom: 22rpx;
					margin: 0;
					transform: translate(-50%,0);
				}
			}
			.txt{
				position: relative;
				z-index: 12;
			}
		}
	}
</style>